<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .box{
        margin: 50px auto;
        width: 200px;
        height: 200px;
        background-color: pink;
        /* 一个值表示四个角相同 */
        /* border-radius: 10px; */

        /* 四个值左上 右上 右下 左下 顺时针 */
        /* border-radius: 10px 20px 40px 80px; */

        /* 没数时看对角 */
        /* border-radius: 10px 40px 80px; */

        /* 圆角边框 */
        /* border-radius: 100px; */
        /* 最大50% */
        border-radius: 50%;
      }
      .two{
        margin: 0 auto;
        width: 200px;
        height: 100px;
        background-color: blue;
        /* 高度一半 */
        border-radius: 50px;
      }
    .one{
        height: 100px;
        width: 100px;
        background-color: skyblue;
        /* 滚动条 */
        /* overflow: scroll; */

        /* 无滚动条 */
        /* overflow 隐藏不常用 */
        overflow: auto;
    }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="two"></div>
    <div class="one">
        溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性  溢出属性
    </div>
</body>
</html>